<template>
	<div class="table-content">
		<div class="table-content-search">
			<div class="tablDataDaily-label"></div>
			<div>金额统计单位：万</div>
		</div>
		<el-table
			key="father"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="tableData"
			style="width: 100%"
			:max-height="480"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				prop="dataType"
				align="center"
				label="类别"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.dataType == 1">官方</span>
					<span v-else-if="scope.row.dataType == 2">代理</span>
					<span v-else-if="scope.row.dataType == 3">总计</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="creditQuota"
				align="center"
				label="授信额度"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.creditQuota) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="newCreditQuota"
				align="center"
				label="新增授信额度"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.newCreditQuota) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="depositAmount"
				align="center"
				min-width="150"
				label="充值金额"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<div
						class="text-link"
						@click="dialogData(scope.row, 'payIn')"
					>
						{{ handleTotalNumber('10k', scope.row.depositAmount) }}
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="withdrawAmount"
				align="center"
				label="提款金额"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<div
						class="text-link"
						@click="dialogData(scope.row, 'payOut')"
					>
						{{ handleTotalNumber('10k', scope.row.withdrawAmount) }}
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="loanAmount"
				align="center"
				label="总借款额度"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.loanAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="totalRepayQuota"
				align="center"
				label="总还款额度"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber('10k', scope.row.totalRepayQuota)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="newLoanAmount"
				align="center"
				label="新增借款额度"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.newLoanAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="newRepayQuota"
				align="center"
				label="新增还款额度"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.newRepayQuota) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="shouldRepaymentAmount"
				align="center"
				label="应收账款"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'10k',
								scope.row.shouldRepaymentAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="shouldPaymentAmount"
				align="center"
				label="应付账款"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'10k',
								scope.row.shouldPaymentAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="newEffectiveNum"
				align="center"
				label="新增有效用户(个)"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.newEffectiveNum || '-' }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="activeNum"
				align="center"
				label="活跃用户(个)"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.activeNum || '-' }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				label="总有效投注额"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.validBetAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="netAmount"
				align="center"
				label="场馆输赢"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.netAmount)">
						{{
							handleTotalNumber(
								'10k',
								scope.row.netAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="memberRebateAmount"
				align="center"
				label="会员返水"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'10k',
								scope.row.memberRebateAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="proxyRebateAmount"
				align="center"
				label="代理返点"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'10k',
								scope.row.proxyRebateAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="platformIncomeAmount"
				align="center"
				label="平台收入"
				show-overflow-tooltip
				min-width="150"
			>
				<template slot-scope="scope">
					<p
						:style="
							handleNumberColor(scope.row.platformIncomeAmount)
						"
					>
						{{
							handleTotalNumber(
								'10k',
								scope.row.platformIncomeAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
		</el-table>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				(val) => {
					showDialog = val
				}
			"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
export default {
	components: {
		DetailPage: () => import('./detail-page.vue')
	},
	mixins: [list],
	props: {
		merchantId: {
			type: String,
			default: null
		},
		dateValue: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			tableData: [],
			totalSummary: '',
			showDialog: false
		}
	},
	created() {},
	mounted() {},
	methods: {
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		dialogData(val, payType) {
			this.rowVal = {
				dataType: val.dataType,
				merchantId: this.merchantId,
				report: dayjs(this.dateValue).format('YYYYMMDD'),
				payType: payType
			}
			this.showDialog = true
		},
		loadData() {
			const params = {
				...this.queryData,
				report: dayjs(this.dateValue).format('YYYYMMDD'),
				merchantId: this.$store.getters.merchantInfo.id || ''
			}
			this.loading = true
			this.$api
				.getDataDailyReportPage(params)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data || []
					}
				})
				.catch(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.table-content {
	width: 100%;
	margin-top: 20px;

	.table-content-search {
		width: auto;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 10px;
		font-size: 13px;
		.tablDataDaily-label {
			float: left;
			font-size: 26px;
			font-weight: bold;
			padding-left: 10px;
			margin-top: 12px;
		}

		.search-slot {
			float: left;
			margin-bottom: 10px;
		}
	}
}
</style>
